<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>订单详细信息</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

	<body>
		<div class="order_info bg_color" id="app" :style="orderStatus> 0 ? 'min-height: 100%;':''">
			<div class="confirmorders">
				<div class="addaddress">
					<div class="icon"><img src="__API__/lib/images/address.png" alt=""></div>
					<div>
						<p><span>收件人：{{data.name}} </span><span>{{data.mobile}}</span></p>
						<p>地址：{{data.prov}} {{data.city}} {{data.area}} {{data.address}}</p>
					</div>
				</div>
				<div class="confirmorders_info">
					<div class="detail_top">
						<h2>商品清单</h2>
						<span class="red" v-if="data.status == 1">待付款</span>
						<span class="blue" v-if="data.status == 2 || data.status == 3">待收货</span>
						<span class="green" v-if="data.status == 4">已完成</span>
						<span class="grey" v-if="data.status == -1">已  取消</span>
					</div>

					<ul class="search_list">
						<li v-for="(item,i) in data.OrderGoods" :key="i">
							<div class="img"><img :src="item.single_pic" alt=""></div>
							<div class="info">
								<div class="left">
									<h3>{{item.title}}</h3>
<!--									<span>{{item.category}}</span>-->
									<div class="info_bot">
										<p class="price">￥{{item.price}}</p><span class="num">x{{item.number}}</span>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="confirmorders_con detail_cont">
					<div class="confirmorders_bot">
						<textarea v-model="content" placeholder="请输入退款原因" ></textarea>
					</div>
<!--					:readonly="data.status > 0" v-if="data.status < 4"-->
					<!-- 待付款 -->

					<!-- 待发货、待收货 -->
<!--					<div class="detail_bottom" v-if="data.status == 1">-->

<!--						<div class="detail_btn blue_btn" @click="goDetail('logistics.html?id='+id)">去支付</div>-->
<!--					</div>-->
					<!-- 已完成 -->
					<div class="detail_bottom" >
						<div class="detail_btn blue_btn" @click="onReceive()">确认退款</div>
<!--						<div class="detail_btn blue_btn" @click="goDetail('logistics.html?express_code='+data.express_code+'&express_number='+data.express_number+'&express_title='+data.express_title+'&mobile='+data.mobile)">查看物流</div>-->
					</div>
				</div>
			</div>

			<div class="footercart" >
				<div class="footercart_left confirmfoot_left">
					<p>总价格：<span class="red_color">￥{{data.total_price}}</span></p>
					<p>共有<span class="red_color">{{data.total_count}}</span>件商品</p>
				</div>
			</div>

			<div class="back_top" @click="goDetail('{:url(\'index\')}')"><img src="__API__/lib/images/back_home.png" alt=""></div>
			<!-- 支付弹窗 -->
			<div class="addcartmask pay_mask" v-if="isPay" @click="cancelMask()">
				<div class="pay_mask_box" @click.stop>
					<ul class="pay_list">
						<li>
							<div class="mui-input-row mui-radio ">
								<label><img src="__API__/lib/images/pay2.png" alt="">购物积分支付
									<span>￥{{integral_price}}</span></label>
								<input name="payRadio" type="radio" value="0" v-model="payCheck" checked />
							</div>
						</li>
						<li>
							<div class="mui-input-row mui-radio ">
								<label><img src="__API__/lib/images/pay1.png" alt="">微信支付</label>
								<input name="payRadio" type="radio" value="1" v-model="payCheck"  />
							</div>
						</li>
					</ul>
					<div class="form_submit">
						<div class="grey_bg" @click="cancelMask()">取消</div>
						<div class="blue_bg" @click="nowpay()">确定</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					data:{},
					id: '',
					content:'',
					address: {
						recipient: '',
						phone: '',
						address: ''
					},
					orderList: [{
						id: '',
						imgPath: '',
						title: '',
						category: '',
						price: '',
						num: '1'
					}],
					totalPrice: '184',
					totalNum: '1',
					reason: '',
					integral_price: '0',
					level_id:0,
					isPay: false,
					payCheck: 1,

					orderStatus: 1,//0-待付款，1-待发货，2-待收货，3-已完成，4-已取消

				},
				created: function() {
					common.removeCache('addressData');
					var that = this;
					that.id = common.getQueryStringRegExp('id');
					// that.getData(searchValue);

					common.ajax("{:url('Order/view')}",{id:that.id} , function(res) {
						that.data = res.data

						// that.getData(searchValue);
					})
				},
				methods: {
					getData(value) {
						let that = this;
						let data = {
							searchValue: value
						}
						common.ajax('', data, function(res) {

						})
					},
					goDetail(url) {
						common.openUrl(url)
					},
					//修改备注
					update_reason() {
						let that = this;
						let id = this.id;
						let reason = that.reason;
							console.log(that.data.remark);
						common.Confirm('确认修改备注么！',' ',function(){
							//取消成功返回上一页
							common.ajax("{:url('Order/update_remark')}",{id:id,remark:that.data.remark} , function(res) {
								common.showToast(res.msg);

							})

						})
					},refund() {
						common.showToast('申请成功,请等待审核');

					},

					//确认收货
					onReceive(){
						let id = this.id;
						let order_number = this.data.order_number;
						var content = this.content;
						if(!content){
							common.showToast('请填写退款原因');return;
						}
						common.Confirm('是否退款么！',' ',function(){

							common.ajax("{:url('Order/refund')}",{token:localStorage.getItem('token'),order_number:order_number,content:content} , function(res) {
								common.showToast(res.msg);
								setTimeout(function () {
									common.PageBack();
								},2000);
							})

						})
					},
					openPay() {
						this.isPay = true;
					},
					cancelMask() {
						this.isPay = false;
						this.isAddress = false;
					},


				}
			});
		</script>
	</body>

</html>
